<template>
  <div class="bbb">

      <el-row :gutter="20">
        <el-col :span="8">
          <div style="padding: 40px">
          </div>
        </el-col>

        <el-col :span="8">
          <div class="ms-login" >
              <el-button round @click.native="goBack">返回</el-button>

          <el-form label-position="left" :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"  class="demo-ruleForm">

              <h3 data-v-2c8a1058="" class="title">用户注册</h3>
          <el-form-item  prop="username">
          <el-input v-model="ruleForm2.username" placeholder="请输入用户名">aaa</el-input>
          </el-form-item>
          <el-form-item  prop="password">
              <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
              <el-form-item  prop="password2">
                  <el-input type="password" v-model="ruleForm2.password2" auto-complete="off" placeholder="请再次输入密码"></el-input>
              </el-form-item>

              <el-form-item prop="code">
              <div>
                  <!--<input type="text" class="form-control" name="verifyCode" required="required" placeholder="验证码">-->
                  <el-input style="float:left;width: 60%" type="text" v-model="ruleForm2.code" auto-complete="off" placeholder="请输入验证码"></el-input>
                  <img style="float: right" v-bind:src="ttt" title="看不清，请点我"  v-on:click="refresh"/>
              </div>
              </el-form-item>

          <el-form-item>
          <el-button style="width: 100%" type="primary" @click.native="registerUser">注册</el-button>
          <!--<el-button @click="resetForm('ruleForm2')">重置</el-button>-->
          </el-form-item>
          </el-form>

          </div>
        </el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>




  </div>
</template>

<script>
  import store from '../../vuex/store'
  export default {
    name: "register",

    data() {

      var checkUsername =(rule,value,callback)=>{
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          callback();
        }
      };

      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }
          callback();
      };

        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm2.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };

        var checkCode =(rule,value,callback)=>{
            if (value === '') {
                callback(new Error('请输入验证码'));
            } else {
                callback();
            }
        };

      return {
        ruleForm2: {
          password: '',
          username: '',
            password2:'',
            code:'',
        },
        rules2: {
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          username: [
            { validator: checkUsername, trigger: 'blur' }
          ],
          password2: [
                { validator: validatePass2, trigger: 'blur' }
            ],
            code: [
                { validator: checkCode, trigger: 'blur' }
            ],
        },

          ttt: '/api/user/getVerifyCode?' + Math.random()
      };
    },
    methods: {

        // 注册
        registerUser:function () {
        if (this.ruleForm2.username ==="") {
          this.$message.error("未填写用户名");
          return;

        }
        if (this.ruleForm2.password ==="") {
            this.$message.error("密码不能为空");
          return;
        }
        if (this.ruleForm2.password2 ==="") {
            this.$message.error("请再次输入密码");
            return;
        }
        if (this.ruleForm2.password2 !==this.ruleForm2.password) {
            this.$message.error("两次密码不一致！");
            return;
        }
        if (this.ruleForm2.code==="") {
            this.$message.error("验证码不能为空");
            return;
        }

        var fd = new FormData();
        fd.append("username",this.ruleForm2.username);
        fd.append("password",this.ruleForm2.password);
        fd.append("inputVerify",this.ruleForm2.code);
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencod'
          }
        };
        this.$axios.post("/api/user/auth/register", fd,config).then( res => {
          console.log(res);
          if (res.data.code ===1) {
              this.$message.success("注册成功！，请登录");
              this.$router.push({path: '/login'});//跳转页面
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch( res => {
          console.log(res);
            this.$message.error(res);
        })
      },

        goBack: function () {
            this.$router.push({path: '/test'});//跳转页面
        },

        //刷新验证码
        refresh: function() {
          this.ttt = '/api/user/getVerifyCode?' + Math.random();
        },


    },
      created() {
        // this.refresh(obj);
      }
  }
</script>

<style scoped>

  .bbb {
    width: 100%;
    height: 600px;
    overflow: hidden;
    display: inline-block;
    /*background: url("../assets/background1.jpg")no-repeat;*/
    /*background-size: 100% 100%;*/
    /*border-image-repeat: repeat;*/
    background:  #373a4b;
  }

  .ms-login{
    position: absolute;
    /*left:47%;*/
    top:90px;
    width:30%;
    height:350px;
    /*margin:-150px 0 0 -190px;*/
    padding:40px;
    /*border-radius: 5px;*/
    background: #fff;
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

</style>
